<template>
  <div class="custom-node-container" @click="isclick && _click()">
    <div class="state-container">
      <div
        class="icon"
        :class="[filterStatusClass(dataSoucre.nodeStatus)]"
      ></div>
      {{ filterStatusName(dataSoucre.nodeStatus) }}
    </div>
    <div class="content">
      <div class="name" :title="dataSoucre.nodeName">
        {{ dataSoucre.nodeName || "-" }}
      </div>
      <div class="time">开始时间：{{ dataSoucre.startDate || "-" }}</div>
      <div class="time">结束时间：{{ dataSoucre.endDate || "-" }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "customNode",
  inject: ["getGraph", "getNode"],
  props: {
    isclick: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      dataSoucre: {},
    };
  },
  mounted() {
    const node = this.getNode();
    this.dataSoucre = node.getData();
  },
  methods: {
    _click() {
      this.$emit("nodeEvent", this.dataSoucre);
    },

    filterStatusName(val) {
      switch (Number(val)) {
        case 0:
          return "未开始";
        case 1:
          return "进行中";
        case 2:
          return "已完成";
        case 3:
          return "延期";
        default:
          break;
      }
    },
    filterStatusClass(val) {
      switch (Number(val)) {
        case 0:
          return "bg_1";
        case 1:
          return "bg_2";
        case 2:
          return "bg_3";
        case 3:
          return "bg_4";
        default:
          break;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.custom-node-container {
  width: 210px;
  height: 138px;
  background: #ffffff;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.1);
  border-radius: 4px 4px 4px 4px;
  border: 1px solid #dcdee2;
  display: flex;
  flex-direction: column;
  .state-container {
    height: 40px;
    background: #fafafa;
    border-radius: 4px 4px 0px 0px;
    border-bottom: 1px solid #dcdee2;
    display: flex;
    align-items: center;
    padding: 0 10px;
    box-sizing: border-box;
    font-size: 14px;
    color: #666666;
    .icon {
      width: 20px;
      height: 20px;
      margin-right: 10px;
      &.bg_1 {
        background: url("~@/assets/img/icon_19.png");
        background-size: 100% 100%;
      }
      &.bg_2 {
        background: url("~@/assets/img/icon_9.png");
        background-size: 100% 100%;
      }
      &.bg_3 {
        background: url("~@/assets/img/icon_12.png");
        background-size: 100% 100%;
      }
      &.bg_4 {
        background: url("~@/assets/img/icon_11.png");
        background-size: 100% 100%;
      }
    }
  }
  .content {
    flex: 1;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .name {
      font-weight: 400;
      font-size: 16px;
      color: #333333;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 1;
    }
    .time {
      font-size: 12px;
      color: #8a9295;
    }
  }
}
</style>
